<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ES6的解构(destructuring)</title>
		<script type="text/javascript">
			/*
				解构(destructuring)：ECMA6提供了两种解构赋值新语法
					1、中括号解构[]  [变量名1,变量名2,...,变量名n] = [数值1, 数值2, ..., 数值n];
					2、大括号解构{}  {变量名1,变量名2,...,变量名n} = {变量名1:数值1, 变量名2:数值2, ..., 变量名n:数值n}
					
					【注】中括号解构和大括号解构不是定义数组和对象的。
			*/
		   
			/**********中括号解构[]**********/
			//普通赋值
			// var a=10, b=20, c=30;
			// alert(a + ',' + b + ',' + c);    //10,20,30
			
			//中括号解构方式
			// var [a, b, c] = [40, 50, 60];
			// alert(a + ',' + b + ',' + c);    //40,50,60
			
			//中括号解构可以嵌套
			// var [a, [x, y], c] = [10, [20, 30], 40];
			// alert(a + ',' + x + ',' + y + ',' + c);    //10,20,30,40
			
			//当右边缺少数值时,对应缺少的位置的变量虽然能声明出来，但值为undefind
			// var [a, [x, y], c] = [10, [20], 30];
			// alert(a);   //10
			// alert(x);   //20
			// alert(y);   //undefined
			// alert(c);   //30
			
			
			
			/**********大括号解构{}**********/
			//普通赋值
			// var a=10, b=20, c=30;
			// alert(a + ',' + b + ',' + c);    //10,20,30
			
			//大括号解构方式
			//等号右边是个对象，但左边的不是对象，赋值好后是单独的变量
			// var {a, b, c} = {
			// 	a: 40,
			// 	b: 50,
			// 	c: 60
			// };
			// alert(a + ',' + b + ',' + c);   //40,50,60
			
			//当右边缺少数值时,对应缺少的位置的变量虽然能声明出来，但值为undefind
			// var {a, b, c} = {
			// 	a: 40,
			// 	c: 60
			// };
			// alert(a + ',' + b + ',' + c);   //40,undefined,60
			
			
			
			
			
			/*
				使用解构的好处
					1、交换两个或多个变量的值
					2、函数可以通过return返回多个值
					3、函数的定义形参，和传入的实参的顺序可改变
						【注】形参可以自带默认值,如果没传入对应的实参，就会只用默认值
					4、可以快速取出数组中的某一个元素
			*/
		   
			/*********1、交换两个或多个变量的值*********/
			// var a=10, b=20, c=30;
			// alert(a + ',' + b + ',' + c);    //10,20,30
			// [a, b, c] = [b, c, a];
			// alert(a + ',' + b + ',' + c);    //20,30,10
			
			
			
			/*********2、函数可以通过return返回多个值*********/
			//正常情况下，return只能返回一个值
			// function show(){
			// 	return 10;
			// }
			// alert(show());   //10
			
			//采用解构的方式
			// function show(){
			// 	return [10,20,30];
			// }
			// alert(show());   //10,20,30
			// var [a, b, c] = show();
			// alert(a + ',' + b + ',' + c);    //10,20,30
			
			
			
			/*********3、函数的定义形参，和传入的实参的顺序可改变*********/
			//正常情况下，实参位置要与形参位置一一对应，否则会出现数据乱套
			// function show(name, age, job){
			// 	alert("我叫" + name + ",今年" + age + "岁,我的工作是" + job);
			// }
			// show(18, "写代码", "小明");    //我叫18,今年写代码岁,我的工作是小明
			
			//采用解构的方式
			// function show({name, age, job}){
			// 	alert("我叫" + name + ",今年" + age + "岁,我的工作是" + job);
			// }
			// show({
			// 	age: 18,
			// 	job: "写代码",
			// 	name: "小明"
			// });      //我叫小明,今年18岁,我的工作是写代码
			
			//【注】形参可以自带默认值,如果没传入对应的实参，就会只用默认值
			// function show({name, age=24, job}){
			// 	alert("我叫" + name + ",今年" + age + "岁,我的工作是" + job);
			// }
			// show({
			// 	age: 18,
			// 	job: "写代码",
			// 	name: "小明"
			// });      //我叫小明,今年18岁,我的工作是写代码
			
			// show({
			// 	job: "写代码",
			// 	name: "小明"
			// });      //我叫小明,今年24岁,我的工作是写代码
			
			
			
			/*********4、可以快速取出数组中的某一个元素*********/
			// var arr = [10, 20, 30, 40, 50];
			// var {0: first, 4: last} = arr;
			// alert(first);   //10
			// alert(last);    //50
			// var {2: num2, 3: num3} = arr;
			// alert(num2);  //30
			// alert(num3);  //40
			
		</script>
	</head>
	<body>
	</body>
</html>
